<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css" />
  <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher" />
  <link rel="stylesheet" type="text/css" href="../../css/responsive.css" />
  <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- SELECT2 -->
  <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
  <!-- UNIFORM -->
  <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
  <!-- datatable -->
  <link rel="stylesheet" href="../../js/datatables/datatable.css">
  <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
  <!-- file-input -->
  <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css" />
  <!-- zt -->
  <link rel="stylesheet" type="text/css" href="../../css/zt/editor.css">
  <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
  <script src="../../js/common.js"></script>
  <style>
    .UIdesign{
      width: 860px;
    }
    .actions .actions-wrap span {
      cursor: pointer;
    }
    .data-tab {
      display: inline-block;
      width: 70px;
      float: left;
      margin-right: 10px;
    }
    .data-tab ul li {
      height: 70px;
      background-color: #f3f3f3;
      margin-bottom: 2px;
      color: #000;
      position: relative;
      line-height: 20px;
      letter-spacing: 2px;
      cursor: pointer;
      border-left: 3px solid #f3f3f3;
    }
    .data-tab ul li.active {
      border-color: #726658;
      color: red;
      font-weight: 600;
    }
    .data-tab ul li>p,
    .data-tab ul li>div {
      width: 100%;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <header class="navbar clearfix" id="header"></header>
  <!-- PAGE -->
  <section id="page">
    <!-- 侧边栏 -->
    <div id="sidebar" class="sidebar">
      <div class="sidebar-menu nav-collapse">

        <!-- SIDEBAR MENU -->
        <ul>
        </ul>
      </div>


    </div>
    <!-- /侧边栏 -->
    <div id="main-content">
      <!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
      <div class="modal fade" id="box-qrcode" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:250px">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">预览</h4>
            </div>
            <div class="modal-body">
              <p>
                <a href="" target="_blank">点击查看</a>
              </p>
              <img width="200" height="200" />
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <!-- CONTENT -->
          <div id="content" class="col-lg-12">
            <!-- PAGE HEADER-->
            <div class="row">
              <div class="col-sm-12">
                <div class="page-header">
                  <!-- BREADCRUMBS -->
                  <ul class="breadcrumb">
                    <li>
                      <i class="fa fa-home"></i>
                      <a href="index.html">首页</a>
                    </li>
                    <li>
                      <a href="#">页面模板</a>
                    </li>
                    <li>分类页面</li>
                  </ul>
                  <!-- /BREADCRUMBS -->
                </div>
              </div>
            </div>
            <!-- /PAGE HEADER -->
            <!-- SAMPLE -->
            <!--template-->
            <div class="ztMainUI">
              <div class="UIdesign clearfix">
                <div class="data-tab" id="data-tab">
                  <ul>
                    <li class="active" data-tab="Health">
                      <div>
                        <p>小食光</p>
                        
                      </div>
                    </li>
                    <li data-tab="PlayGame">
                      <div>
                        <p>小玩物</p>
                        
                      </div>
                    </li>
                    <li data-tab="GoodHouse">
                      <p>美好家</p>
                    </li>
                    <li data-tab="Refresh">
                      <p>勤洗护</p>
                    </li>
                    <li data-tab="InClothes">
                      <p>IN穿搭</p>
                    </li>
                    
                  </ul>
                </div>
                <div class="UIpreview" id="UIpreview">
                  <div class="UIpreview-headder">分类页面</div>
                  <div class="app-entry">
                    <!-- 因为直接创建模板所以注释 -->
                    <div class="app-field tips">
                      <div class="goods-template-block">
                        <p>点击下方按钮选择模板</p>
                      </div>
                    </div>
                  </div>
                  <div class="js-add-region">
                    <h4>模板选择</h4>
                    <ul>
                      
                      <li>
                        <a href="javascript:;" class="add_tem" data-target="Tem3">9格模板</a>
                      </li>
                      <!-- 目前只需要通栏图和商品列表 -->
                      <!-- <li>
                        <a href="javascript:;" class="add_coupon" data-target="couponHtml">领券</a>
                      </li>
                      <li>
                        <a href="javascript:;" class="add_category" data-target="categoryHtml">分类</a>
                      </li>
                      <li>
                        <a href="javascript:;" class="add_swiper" data-target="swiperHtml">首页轮播</a>
                      </li> -->
                    </ul>
                  </div>
                </div>
                <div class="UIsidebar" id="UIsidebar">
                </div>
              </div>
            </div>
            <!--/template-->
          </div>
        </div>
      </div>
    </div>
    <!-- /CONTENT-->
    <div class="row clearfix" style="height: 30px;">
      <div style="text-align: center;">
        <div class="box">
          <a href="javascript:;" class="btn btn-success config bt-submit" style="width: 100px;margin-top:20px;" id='save'>保存</a>
          <!-- <a href="javascript:;" class="btn btn-danger config bt-review" style="width: 100px;margin-left:20px; margin-top:20px;">预览</a> -->
          <a href="javascript:history.go(-1);" class="btn btn-default" style="width: 100px;margin-left:20px; margin-top:20px;">取消并返回</a>
        </div>
      </div>
    </div>
    <!-- /SAMPLE -->
    </div>
    <!-- 分类 -->
  </section>
  <!--/PAGE -->
  <!-- JAVASCRIPTS -->

  <!-- JQUERY UI-->
  <script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
  <!-- BOOTSTRAP -->
  <script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
  <!-- SLIMSCROLL -->
  <script type="text/javascript" src="../../js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
  <script type="text/javascript" src="../../js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
  <!-- BLOCK UI -->
  <script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
  <!--bootbox-->
  <script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
  <!-- AUTOSIZE -->
  <script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
  <!-- spinner -->
  <script src="../../js/spinner/spin.js"></script>
  <!-- bootstrap-fileupload -->
  <script type="text/javascript" src="../../js/bootstrap-fileupload/jquery.iframe-transport.js"></script>
  <script type="text/javascript" src="../../js/bootstrap-fileupload/jquery.fileupload.min.js"></script>
  <!-- INPUT MASK -->
  <script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
  <!-- SELECT2 -->
  <script type="text/javascript" src="../../js/select2/select2.min.js"></script>
  <!-- UNIFORM -->
  <script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
  <!-- WIZARD -->
  <script src="../../js/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
  <!-- WIZARD -->
  <script src="../../js/jquery-validate/jquery.validate.min.js"></script>
  <script src="../../js/jquery-validate/additional-methods.min.js"></script>
  <script src="../../js/bootstrap-wizard/form-wizard.js"></script>
  <!-- NESTABLE LISTS -->
  <script type="text/javascript" src="../../js/nestable/jquery.nestable.min.js"></script>
  <!-- COOKIE -->
  <script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
  <!-- CUSTOM SCRIPT -->
  <script src="../../js/script.js"></script>
  <script src="../../js/Sortable.min.js"></script>
  <script>
    $(function () {
      var pageTemplate = {
        /**
         * 数据注解 
         * @param {Object} dataList 所有数据 
         * @param {Array} data 当前正在编辑的数据
         * @param {Object} dataTab 当前正在编辑的 tab名字 默认 tuijian 为您推荐
         * @param {Number} divNum moudelId 递增
         * @param {String} tem 模板类型 默认为空 根据加载数据判定模板类型
         */
        dataList: {},
        dataTab: 'Health',
        data: [],
        divNum: 0,
        editIndex: null, 
        tem: '',
        imgSrcBanner: '../../img/nessn269.jpg',
        imgSrcProduct: 'http://img1.yiigoo.com/images/200.jpg',
        /**
         * 初始化一些事件
         */
        init: function() {
          this.bindAddTem();
          this.bindMoudelEditToggle();
          this.bindDataTab();
          this.getDataList();
          this.deleteEditInner();
          this.bindSave();
        },
        /**
         * 获得数据
         */
        getDataList: function () {
          var that = this;
          $.ajax({
            type: 'get',
            url: App.getContextPath() + "admin/template/findCategoryImg.do?fileType=LifeCategory",
            success: function (result) {
              if (result.type == 'success') {
                if (result.extra) {
                  that.dataList = JSON.parse(result.extra);
                  
                  that.data = that.dataList[that.dataTab] || [];
                  that.renderData();
                }
              }
            }
          })
        },
        /**
         * 渲染数据
         */
        renderData: function () {
          if (!this.data.length) {
            this.tem = '';
            $("#UIpreview .tips").show();
            $("#UIpreview .add_tem").removeClass('active');
            return;
          }
          
          var data = this.data,
              length = data[1].productList ? data[1].productList.length : 0;
          this.tem = length == 1 ? 'Tem1' : length == 4 ? 'Tem2' : length == 9 ? 'Tem3' : '';
          $("#UIpreview .add_tem[data-target=" + this.tem + "]").addClass("active").parent().siblings().find('.add_tem').removeClass('active');
          this.addTem();
        },
        /**
         * 绑定模块添加之后的点击事件 实现编辑按钮的切换
         */
        bindMoudelEditToggle: function() {
          var that = this;
          $("#UIpreview .app-entry").click(function (e) {
            var target = e.target;
            $(target).parents('.divId').find(".actions").show().parent().siblings().find('.actions').hide();
            if ($(target).hasClass('edit')) {
              e.stopPropagation()
              var $parent = $(target).parents('.divId'),
                  type = $parent.attr('data-type'),
                  top = $parent[0].offsetTop;
              that.editIndex = $parent.attr('index');
              that.createEditInner(type, top, that.data[that.editIndex]);
            }
          })
        },
        /**
         * 绑定添加模板事件
         */
        bindAddTem: function() {
          var that = this;
          $("#UIpreview .add_tem").click(function (e) {
            var target = e.target,
                moudelTem = $(target).attr("data-target");
            if (moudelTem == that.tem) {
              return;
            }
            if (moudelTem) {
              if (that.tem && that.data.length > 0) {
                $.confirm("确认改变模板类型吗?模板类型改变数据将需要重新添加!", function () {
                  that.data = [];
                  that.tem = moudelTem;
                  $("#UIpreview .add_tem[data-target=" + moudelTem + "]").addClass("active").parent().siblings().find('.add_tem').removeClass('active');
                  that.addTem();
                });
              } else {
                that.tem = moudelTem;
                $("#UIpreview .add_tem[data-target=" + moudelTem + "]").addClass("active").parent().siblings().find('.add_tem').removeClass('active');
                that.addTem();
              }
            }
          });
        },
        /**
         * 添加模板
         * @param {String} type 模板类型
         * 每个模板暂时有三个模块区域 分别为 banner banner product(根据模板不同进行变化)
         */
        addTem: function () {
          this.divNum = 0;
          $("#UIpreview").find(".divId").remove();
          $("#UIpreview").find(".tips").hide();
          var Moudelbox = $("#UIpreview .app-entry");
          Moudelbox.append(this.createMoudel('banner'));
         <!-- Moudelbox.append(this.createMoudel('banner'));-->
          Moudelbox.append(this.createMoudel('product', this.tem));
        },
        /**
         * 创建模块公共外层 并设置模块类型
         * @param {String} type 模块类型
         * @returns jquery doom
         */
        createMoudel: function(type,tem) {
          var moudelOuterHTML = [],
              divNum = this.divNum, 
              data = this.data[divNum],
              divId = 'div' + this.divNum ++;
          moudelOuterHTML.push("<div class='app-field divId' data-type='" + type + "' index='" + divNum + "' id='" + divId + "'>");
            moudelOuterHTML.push("<div class='group'>");
            moudelOuterHTML.push("</div>");
            moudelOuterHTML.push("<div class='actions'>");
              moudelOuterHTML.push("<div class='actions-wrap'>");
                // 此页面只是有模板说以只适用于编辑
                moudelOuterHTML.push("<span class='action edit'>编辑</span>");
                //moudelOuterHTML.push("<span class='action add'>加内容</span>");
                //moudelOuterHTML.push("<span class='action delete'>删除</span>");
              moudelOuterHTML.push("</div>");
            moudelOuterHTML.push("</div>")
          moudelOuterHTML.push("</div>");
          moudelOuterHTML = moudelOuterHTML.join('');
          var $moudelOuterHTML = $(moudelOuterHTML);
          $moudelOuterHTML.find('.group').append(this.moudelInnerHTMLObj[type](data, tem));
          return $moudelOuterHTML;
        },
        /**
         * 模块类型
         * 暂时分为 banner 、根据不同模板类型的porducet（3种）模块
         */
        moudelInnerHTMLObj: {
          banner: function (data) {
            var imgSrcBanner = pageTemplate.imgSrcBanner,
                imagePath = data ? data.imagePath || imgSrcBanner : imgSrcBanner,
                bannerArrays = [];
            bannerArrays.push("<ul class='group-col-1'>");
              bannerArrays.push("<li><a href='javascript:;'><img src='" + imagePath + "'></a></li>");
            bannerArrays.push("</ul>");
            return bannerArrays.join('');
          },
          product: function (data, tem) {
            var productList = data ? data.productList || [] : [],
                length = tem == 'Tem1' ? 1 : tem == 'Tem2' ? 4 : 9,
                productArrays = [];
            productArrays.push("<ul class='group-col-" + tem.charAt(tem.length - 1) + "'>");
              for (var i = 0; i < length ; i++) {
                var imgSrcProduct = pageTemplate.imgSrcProduct,
                    imagePath = productList[i] ? productList[i].imagePath || imgSrcProduct : imgSrcProduct;
                productArrays.push("<li><a href='javascript:;'><img src='" + imagePath + "'></a></li>");
              }
            productArrays.push("</ul>");
            return productArrays.join('');
          }
        },
        /**
         * 数据类型切换绑定
         */
        bindDataTab: function() {
          var that = this;
          $("#data-tab li").click(function (e){
            var $this = $(this);
            if (!$this.hasClass('active')) {
              that.dataList[that.dataTab] = that.data;
              $this.addClass('active').siblings().removeClass('active');
              var dataTab = $this.attr("data-tab");
              that.dataTab = dataTab;
              that.divNum = 0;
              $("#UIpreview").find(".divId").remove();
              that.getDataList();
            }
          })
        },
        deleteEditInner: function () {
          $("body").click(function () {
            $("#UIsidebar").empty();
          })
          $("#UIsidebar").click(function (event) {
            event.stopPropagation();
          });
        },
        /**
         * 动态创建可编辑区域
         * @param {String} type 可编辑区域类型
         * @param {Number} top 可编辑区域距离顶部的高度
         * @param {data} 数据 可编辑区域数据
         */
        createEditInner: function(type, top, data) {
          var $UIsidebar = $("#UIsidebar"),
              top = top || 0;
          $UIsidebar.empty();
          editInner = [];
          switch (type) {
            case 'banner':
              var imagePath = data ? data.imagePath || '' : '',
                  linkUrl = data ? data.linkUrl || '' : '';
              editInner.push("<div class='app-sidebar-inner' style='top:" + top + "px'>");
                editInner.push("<div class='form-horizontal'>");
                  editInner.push("<div class='control-group'>");
                    editInner.push("<label class='control-label'>上传图片：</label>");
                    editInner.push("<form name='formDiv'>");
                      editInner.push("<div class='controls col-lst2'>");
                        editInner.push("<div class='lst-addimg'>");   
                          editInner.push("<p class='addimg aImg' style='display:" + (imagePath ? 'none' : 'block') + "'>+");
                            editInner.push("<input class='upImg' name='uploadFile' type='file' upload-file='uploadImg' data-index='0'>");
                          editInner.push("</p>");
                          editInner.push("<p class='addimg newImg' style='display:" + (imagePath ? 'block' : 'none') + "'>");
                            editInner.push("<a href='javascript:;'><span class='action' data-index=" + i + ">删除</span><img src='" + imagePath + "'></a>")
                          editInner.push("</p>");
                          editInner.push("<input type='text' name='productId' placeholder='产品ID' value='" + linkUrl + "' data-index='0'>");
                        editInner.push("</div");
                      editInner.push("</div>")
                    editInner.push("</form>");
                  editInner.push("</div>");
                editInner.push("</div>");
                editInner.push("<div class='control-group divimgsize'>");
                  editInner.push("<label class='control-label'></label>");
                  editInner.push("<p class='red'>图片宽度为");
                  editInner.push("<span class='imgsize'>750</span>");
                  editInner.push("px,高度不限</p>");
                editInner.push("</div>")
              editInner.push("</div>");
              editInner = editInner.join('');
              $UIsidebar.append(editInner);
              this.addFileUpLoad();
              this.delteImg();
              this.addLink();
              break;
            case 'product':
              var tem = this.tem,
                  classType = tem == 'Tem3' ? 3 : 2,
                  picLength = tem == 'Tem1' ? 1 : tem == 'Tem2' ? 4 : 9;
                  imgWidth = tem == 'Tem1' ? 750 : tem == 'Tem2' ? 335 : 220,
                  productList = data ? data.productList || [] : [];
              editInner.push("<div class='app-sidebar-inner' style='top:" + top + "px'>");
                editInner.push("<div class='form-horizontal'>");
                  editInner.push("<div class='control-group'>");
                    editInner.push("<label class='control-label'>上传图片：</label>");
                    editInner.push("<form name='formDiv'>");
                      editInner.push("<div class='controls col-lst" + classType + "'>");
                        for (var i = 0; i < picLength; i ++) {
                          var imagePath = productList[i] ? productList[i].imagePath || '' : '',
                              linkUrl = productList[i] ? productList[i].linkUrl || '' : '';
                          editInner.push("<div class='lst-addimg'>");
                            editInner.push("<p class='addimg aImg' style='display:" + (imagePath ? 'none' : 'block') + "'>+");
                              editInner.push("<input class='upImg' name='uploadFile' type='file' upload-file='uploadImg' data-index=" + i + ">");
                            editInner.push("</p>");
                            editInner.push("<p class='addimg newImg' style='display:" + (imagePath ? 'block' : 'none') + "'>");
                              editInner.push("<a href='javascript:;'><span class='action' data-index=" + i + ">删除</span><img src='" + imagePath + "'></a>")
                            editInner.push("</p>");
                            editInner.push("<input type='text' name='productId' value='" + linkUrl + "' placeholder='产品ID' data-index=" + i + ">");
                          editInner.push("</div>");
                        }
                      editInner.push("</div>")
                    editInner.push("</form>");
                  editInner.push("</div>")
                  editInner.push("<div class='control-group divimgsize'>");
                    editInner.push("<label class='control-label'></label>");
                    editInner.push("<p class='red'>图片宽度为");
                      editInner.push("<span class='imgsize'>" + imgWidth + "</span>");
                    editInner.push("px,高度不限</p>");
                  editInner.push("</div>")
                editInner.push("</div>")
              editInner.push("</div>");
              editInner = editInner.join('');
              $UIsidebar.append(editInner);
              this.addFileUpLoad();
              this.delteImg();
              this.addLink();
              break;
            default:
              break;
          }
        },
        delteImg: function() {
          var that = this;
          $("#UIsidebar .newImg .action").click(function() {
            var $this = $(this),
                index = $this.attr("data-index"),
                editIndex = that.editIndex,
                div = $("#div" + editIndex),
                type = div.attr('data-type');
            $this.siblings("img").attr("src",'').parents('.newImg').hide().siblings('.aImg').show();
            if (type == 'banner') {
              div.find('img').attr('src', that.imgSrcBanner);
              that.data[editIndex].imagePath = '';
            } else {
              div.find('img').eq(index).attr('src', that.imgSrcProduct);
              that.data[editIndex].productList[index].imagePath = '';
            }
          })
        },
        addLink: function() {
          var that = this;
          $("input[name='productId']").change(function() {
            var $this = $(this),
                linkUrl = $this.val(),
                index = $this.attr("data-index"),
                editIndex = that.editIndex,
                div = $("#div" + editIndex),
                type = div.attr('data-type'),
                Info = null;
            if (type == 'banner') {
              Info = that.data[editIndex];
            } else {
              Info = that.data[editIndex].productList[index];
            }
            Info.linkUrl = linkUrl;
            if(linkUrl.indexOf("product.html")>0){
              Info.imageType="Product";
              var i=linkUrl.indexOf("?");
              var k=linkUrl.substr(i+1,linkUrl.length).split("&");			
              Info.searchKey=k[0].replace("productId=","");
            }
            if(linkUrl.indexOf("static")>0){
              Info.imageType="WebView";					
              Info.searchKey="";
            }
            if(linkUrl.indexOf("group")>0){
              Info.imageType="Group";					
              Info.searchKey="";
            }
            if(img.linkUrl.indexOf("special?basicattribute=")>0){
		    var i=img.linkUrl.indexOf("basicattribute=");
			var k=img.linkUrl.substr(i+1,img.linkUrl.length);			
			img.searchKey = k;
			img.imageType="FilterList";					
			
		}
            if(linkUrl.indexOf("list.html")>0){
              Info.imageType="List";
              var i=linkUrl.indexOf("?");
              var k=linkUrl.substr(i+1,linkUrl.length);	
              Info.searchKey=k;
              //var k=linkUrl.substr(i+1,linkUrl.length).split("&");			
              //Info.searchKey=k[0].replace("tags=","").replace("key=","");
            }
          })
        },
        addFileUpLoad: function() {
          var that = this;
          $("[upload-file=uploadImg]").fileupload({
            url: App.getContextPath() + "admin/file/uploadFile.do",
            formData: {
              fileType: "Promotion"
            },
            dataType: 'json',
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png|JPG?g)$/i,
            iframe: true,
            maxNumberOfFiles: 1,
            autoUpload: true,
            start: function (e) {
              $('.progress').fadeIn(300);
              return true;
            },
            done: function (e, data) {
              var result = data.result;
              if (result.message != "") {
                $.alert(result.message)
                return false;
              } else {
                // 图片上传完之后替图片路径
                var index = $(this).attr("data-index"),
                    imgSrc = result.fileUrl,
                    editIndex = that.editIndex,
                    type = $("#div" + editIndex).attr("data-type");
                $("#div" + that.editIndex).find('img').eq(index).attr('src', imgSrc);
                $(this).parent().hide().siblings(".newImg").show().find('img').attr('src', imgSrc);
                // 保存数据
                if (type == 'banner') {
                  that.data[editIndex] = {
                    type : 'banner',
                    imagePath: imgSrc
                  }
                } else {
                  var obj = that.data[editIndex] || {},
                      productList = obj.productList || [];
                  obj.type = 'product';
                  productList[index] = {
                    type: 'product',
                    imagePath: imgSrc
                  }
                  obj.productList = productList;
                  that.data[editIndex] = obj;
                }
              }
            },
            progressall: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);
              $('.progress-bar').css('width', progress + '%');
            }
          }).on('fileuploaddone', function (e, data) {
          });
        },
        /**
         * 保存数据
         */
        bindSave: function() {
          var that = this;
          $("#save").click(function(){
            $.confirm("确认数据都已经上传，保存会立即更新!",function(){
              that.dataList[that.dataTab] = that.data;
              $.ajax({
                type: 'post',
                url: App.getContextPath() + "admin/template/saveCategory.do",
                data: {img: JSON.stringify(that.dataList),fileType: 'LifeCategory'},
                success: function (result) {
                  if (result.type == "success") {
                    $.alert("保存成功");
                  }
                }
              })
            })
          });
        }
      }
      $("#header").load("../head.html");
      App.init(); //Initialise plugins and elements
      pageTemplate.init();
    });
  </script>
</body>

</html>